// 声明定义函数组件
// function App() {
//   console.log(<div className="app">hello react</div>);
//   return <div className="app">hello react</div>;
// }
// 表达式定义函数组件
// import { Fragment } from 'react';
import './global.css';
import helloCss from './hello.module.css';
import './box.scss';
import classnames from 'classnames';
const App = () => {
  const username = 'xiaoming';
  const head = (
    <div
      className="head"
      style={{ backgroundColor: 'red', width: '100px', height: '100px' }}
    >
      app head
    </div>
  );
  // const myClass = ['box1', 'box2'];
  const myClass = classnames({
    box1: true,
    box2: false,
    [helloCss.headTitle]: true,
  });
  return (
    <>
      <div className="app">
        Hello React
        {head}
        <div className={myClass}>hello App</div>
        {/* <div className="box1 box2">hello App</div> */}
        <div className="box">aaaaaaaaaaaaa</div>
        <div className={helloCss.box}>bbbbbbbbbbbb</div>
        <div className="box3">bbbbbbbbbbbb</div>
        <div className={helloCss['box-title']}>title</div>
        <div className={helloCss.boxTitle}>title2</div>
        <label htmlFor="elem">用户名</label>
        <input
          id="elem"
          type="text"
          tabIndex="1"
          onClick={() => {}}
          data-id="x"
        />
        <div title={username}>
          {1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}
          <br />
          {username}
          {/* fn */}
        </div>
      </div>
      <div className="app2"></div>
    </>
  );
};
export default App;
